<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>黔东南州民爆行业公共服务平台</title>
		<meta name="keywords" content="网站关键字1,网站关键字2,网站关键字3,网站关键字4,网站关键字5">
	    <meta name="description" content="本网站简介">
	    <link rel="shortcut icon" href="../static/images/favicon.ico">
		<link rel="stylesheet" href="../static/js/lib/layui/css/layui.css" />
		<link rel="stylesheet" href="../static/css/global.css" />
		<link rel="stylesheet" href="../static/css/layout.css" />
		<link rel="stylesheet" href="../static/js/lib/customScrollbar/mCustomScrollbar.css" />

	</head>
	<body style="background: url(../static/images/gerenditubeijing.png) no-repeat;background-size: 100% 100%;position: relative;height: 100vh;">
		<div class="sidebar">
			<ul>
				<li class="current"><a href="#"><i class="layui-icon layui-icon-home"></i><p>首页</p></a></li>
				<li><a href="#"><i class="layui-icon layui-icon-video"></i><p>现场视频</p></a></li>
				<li><a href="#"><i class="layui-icon layui-icon-camera"></i><p>车辆监控</p></a></li>
				<li><a href="#"><i class="layui-icon layui-icon-set" id="tiaozhuanpingtai"></i><p>业务系统</p></a></li>
			</ul>
		</div>
		<div class="fly-header clearBoth pl-20 pr-20" style="opacity: .8;height: 50px;">
			<a href="logo.html" class="logo fl" style="line-height: 50px;">
				<img src="../static/images/nationalEmblem.png" style="width: 30px;">
				<span style="font-size: 20px;">黔东南州民爆行业公共服务云平台</span>
			</a>
			<div class="fr fly-header-msg" style="top: 16px;right: 170px;">
				<span>2018-11-11<span>星期天</span></span>
				<span>多云：<span>微风0级</span><span>22℃</span></span>
				<span>本月登录：<span>12次</span></span>
				<span>本月登录时长：<span>20小时</span></span>
			</div>
			<ul class="loginbar login-info" style="top: 9px;line-height: 30px;">
                <li id="userInfoBox" class="layui-nav-item userNameBox">
                    <a href="#"><img src="../static/images/index/Homepage-onthedayofconstructionpersonnel.png" style="width: 30px;height: 30px;" /></a>
                </li>
                <li id="logoutBtn" class="extBtn" data-toggle="logout">
                    <a href="javascript: void(0);">退出登录</a>
                </li>
            </ul>
            <ul class="loginbar islogin layui-hide" style="top: 9px;line-height: 30px;">
                <li id="loginBtn" data-toggle="login" class="layui-nav-item login-btn" type="login">
                    <a href="javascript:;">登陆</a>
                </li>
                <li id="regBtn" class="layui-nav-item login-btn" type="reg">
                	<a href="http://qaaccount.915dj.com/reg/person">注册</a>
                </li>
            </ul>
		</div>
		<!-- 顶部筛选和搜索 -->
		<div class="filter-bar mb-30 clearBoth" style="position: absolute;top: 60px; left: 90px; right: 10px; width: inherit; z-index: 122;">
			<div class="title">选择图层：</div>
			<div class="filter-scroll">
				<div class="filter-item-box" >
					<a class="filter-item current" style="color: #37e8e3;">
						首页
					</a>
					<a class="filter-item" current href="Location.html">
						<span>爆破项目</span>
					</a>
					<a class="filter-item">
						<span><span>民爆库房</span></span>
					</a>
					<a class="filter-item">
						<span><span>工程技术人员</span></span>
					</a>
					<a class="filter-item">
						<span><span>爆破员</span></span>
					</a>
					<a class="filter-item">
						<span><span>安全员</span></span>
					</a>
					<a class="filter-item">
						<span><span>保管员</span></span>
					</a>
					<a class="filter-item">
						<span><span>危险地图</span></span>
					</a>
				</div>
			</div>
			<div class="search-box">
				<img src="../static/images/tongji1-sousuoanniu.png" />
				<input type="text" placeholder="输入关键字搜索" class="layui-input" />
			</div>
		</div>
		<div class="wrapper" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;padding-top: 105px;">
			<div class="bigData-wrapper">
				<div class="bigData-main">
					<!-- 爆破项目  Blasting project -->
					<div class="blastingProject">
						<!-- 外框样式 -->
						<div >
							<!-- 左上角样式 -->
							<span >
								<span >
									<span >
										<i></i>
										<i></i>
										<i></i>
									</span>
								</span>
								<span ></span>
							</span>
							<!-- 顶部条 -->
							<span ></span>
							<!-- 右边条 -->
							<span ></span>
							<!-- 内容区域  -->
							<div class="main-statistical-template-content">
								<div class="main-statistical-template-title">爆破项目</div>
								<div class="main-statistical-template-content overflow">
									<div class="blastingProject-legend">
										<span><i></i><span>总爆破项目/个</span></span>
										<span><i></i><span>当日作业项目/个</span></span>
									</div>
									<div class="blastingProject-progress customScrollbar">
										<div class="blastingProject-list clearBoth">
											<div class="text">凯里市</div>
											<div class="progress">
												<div class="layui-progress" >
												  <div class="layui-progress-bar" lay-percent="10%"></div>
												</div>
											</div>
											<div class="total"><span>123</span>/<span>980</span></div>
										</div>
										<div class="blastingProject-list clearBoth">
											<div class="text">麻江县</div>
											<div class="progress">
												<div class="layui-progress" >
												  <div class="layui-progress-bar" lay-percent="20%"></div>
												</div>
											</div>
											<div class="total"><span>123</span>/<span>980</span></div>
										</div>
										<div class="blastingProject-list clearBoth">
											<div class="text">凯里市</div>
											<div class="progress">
												<div class="layui-progress" >
												  <div class="layui-progress-bar" lay-percent="30%"></div>
												</div>
											</div>
											<div class="total"><span>123</span>/<span>980</span></div>
										</div>
										<div class="blastingProject-list clearBoth">
											<div class="text">凯里市</div>
											<div class="progress">
												<div class="layui-progress" >
												  <div class="layui-progress-bar" lay-percent="40%"></div>
												</div>
											</div>
											<div class="total"><span>123</span>/<span>980</span></div>
										</div>
										<div class="blastingProject-list clearBoth">
											<div class="text">凯里市</div>
											<div class="progress">
												<div class="layui-progress" >
												  <div class="layui-progress-bar" lay-percent="50%"></div>
												</div>
											</div>
											<div class="total"><span>123</span>/<span>980</span></div>
										</div>
										<div class="blastingProject-list clearBoth">
											<div class="text">凯里市</div>
											<div class="progress">
												<div class="layui-progress" >
												  <div class="layui-progress-bar" lay-percent="60%"></div>
												</div>
											</div>
											<div class="total"><span>123</span>/<span>980</span></div>
										</div>
										<div class="blastingProject-list clearBoth">
											<div class="text">凯里市</div>
											<div class="progress">
												<div class="layui-progress" >
												  <div class="layui-progress-bar" lay-percent="70%"></div>
												</div>
											</div>
											<div class="total"><span>123</span>/<span>980</span></div>
										</div>
										<div class="blastingProject-list clearBoth">
											<div class="text">凯里市</div>
											<div class="progress">
												<div class="layui-progress" >
												  <div class="layui-progress-bar" lay-percent="80%"></div>
												</div>
											</div>
											<div class="total"><span>123</span>/<span>980</span></div>
										</div>
										<div class="blastingProject-list clearBoth">
											<div class="text">凯里市</div>
											<div class="progress">
												<div class="layui-progress" >
												  <div class="layui-progress-bar" lay-percent="90%"></div>
												</div>
											</div>
											<div class="total"><span>123</span>/<span>980</span></div>
										</div>
										<div class="blastingProject-list clearBoth">
											<div class="text">凯里市</div>
											<div class="progress">
												<div class="layui-progress" >
												  <div class="layui-progress-bar" lay-percent="100%"></div>
												</div>
											</div>
											<div class="total"><span>123</span>/<span>980</span></div>
										</div>
										<div class="blastingProject-list clearBoth">
											<div class="text">凯里市</div>
											<div class="progress">
												<div class="layui-progress" >
												  <div class="layui-progress-bar" lay-percent="70%"></div>
												</div>
											</div>
											<div class="total"><span>123</span>/<span>980</span></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 底部样式 -->
						<div ><p></p></div>
					</div>
					
					<!-- 从业单位  Employment unit -->
					<div class="employmentUnit">
						<!-- 外框样式 -->
						<div class=" p-0">
							<!-- 左上角样式 -->
							<span >
								<span >
									<span >
										<i></i>
										<i></i>
										<i></i>
									</span>
								</span>
								<span ></span>
							</span>
							<!-- 顶部条 -->
							<span ></span>
							<!-- 右边条 -->
							<span ></span>
							<!-- 内容区域  -->
							<div class="main-statistical-template-content">
								<div class="main-statistical-template-title pl-10" style="padding-top: 5px;">从业单位</div>
								<div class="main-statistical-template-content">
									<div id="employmentUnit" style="width: 100%;height:180px;">
										<!-- 加载动画 图表加载完成后会自动删除  -->
										<div style="height: 180px;line-height: 180px;text-align: center;color: #999;font-size: 20px;">
											<i style="font-size: 25px;" class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
											加载中...
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 底部样式 -->
						<div ><p></p></div>
					</div>
					
					<!-- 预警信息  warning -->
					<div class="warningInformation">
						<!-- 外框样式 -->
						<div >
							<!-- 左上角样式 -->
							<span >
								<span >
									<span >
										<i></i>
										<i></i>
										<i></i>
									</span>
								</span>
								<span ></span>
							</span>
							<!-- 顶部条 -->
							<span ></span>
							<!-- 右边条 -->
							<span ></span>
							<!-- 内容区域  -->
							<div class="main-statistical-template-content overflow">
								<div class="main-statistical-template-title">预警信息</div>
								<img class="warningInformation-icon" src="../static/images/tongji1-yujingxinxi.png" />
								<div class="warningInformation-table customScrollbar">
									<table class="layui-table m-0" lay-even="" lay-skin="nob">
										<thead>
											<tr>
												<th>预警类别</th>
												<th>预警范围</th>
												<th>预警说明</th>
												<th>预警时间</th>
												<th>提醒信息数量</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>一类</td>
												<td>项目预警</td>
												<td>人员变更</td>
												<td>2018-11-11</td>
												<td>32</td>
											</tr>
											<tr>
												<td>二类</td>
												<td>单位预警</td>
												<td>资质预警</td>
												<td>2018-12-22</td>
												<td>32</td>
											</tr>
											<tr>
												<td>三类</td>
												<td>库房预警</td>
												<td>检测超期</td>
												<td>2018-12-22</td>
												<td>32</td>
											</tr>
											<tr>
												<td>四类</td>
												<td>物品预警</td>
												<td>雷管丢失</td>
												<td>2018-12-22</td>
												<td>3</td>
											</tr>
											<tr>
												<td>四类</td>
												<td>物品预警</td>
												<td>雷管丢失</td>
												<td>2018-12-22</td>
												<td>3</td>
											</tr>
											<tr>
												<td>四类</td>
												<td>物品预警</td>
												<td>雷管丢失</td>
												<td>2018-12-22</td>
												<td>3</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<!-- 底部样式 -->
						<div ><p></p></div>
					</div>
					
					<!-- 当日作业人员  operators -->
					<div class="operators">
						<!-- 外框样式 -->
						<div class=" p-0">
							<!-- 左上角样式 -->
							<span >
								<span >
									<span >
										<i></i>
										<i></i>
										<i></i>
									</span>
								</span>
								<span ></span>
							</span>
							<!-- 顶部条 -->
							<span ></span>
							<!-- 右边条 -->
							<span ></span>
							<!-- 内容区域  -->
							<div class="main-statistical-template-content">
								<div class="main-statistical-template-title pl-10" style="padding-top: 5px;">当日作业人员</div>
								<div class="main-statistical-template-content">
									<div id="operators_map" style="width: 100%;height: 180px;">
										<!-- 加载动画 图表加载完成后会自动删除  -->
										<div style="height: 180px;line-height: 180px;text-align: center;color: #999;font-size: 20px;">
											<i style="font-size: 25px;" class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
											加载中...
										</div>
									</div>
									<div class="operators-boxs layui-hide">
										<div class="operators-list">
											<div class="text">凯里市</div>
											<div class="info">
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="30%"></div>
												  <span class="num" style="left: 30%;">工程技术:16</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="90%"></div>
												  <span class="num" style="left: 90%;">爆破:7</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="56%"></div>
												  <span class="num" style="left: 56%;">安全:14</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="15%"></div>
												  <span class="num" style="left: 15%;">保管:4</span>
												</div>
											</div>
										</div>
										<div class="operators-list">
											<div class="text">麻江县</div>
											<div class="info">
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="30%"></div>
												  <span class="num" style="left: 30%;">工程技术:16</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="90%"></div>
												  <span class="num" style="left: 90%;">爆破:7</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="56%"></div>
												  <span class="num" style="left: 56%;">安全:14</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="15%"></div>
												  <span class="num" style="left: 15%;">保管:4</span>
												</div>
											</div>
										</div>
										<div class="operators-list">
											<div class="text">丹寨县</div>
											<div class="info">
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="30%"></div>
												  <span class="num" style="left: 30%;">工程技术:16</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="90%"></div>
												  <span class="num" style="left: 90%;">爆破:7</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="56%"></div>
												  <span class="num" style="left: 56%;">安全:14</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="15%"></div>
												  <span class="num" style="left: 15%;">保管:4</span>
												</div>
											</div>
										</div>
										<div class="operators-list">
											<div class="text">镇远县</div>
											<div class="info">
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="30%"></div>
												  <span class="num" style="left: 30%;">工程技术:16</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="90%"></div>
												  <span class="num" style="left: 90%;">爆破:7</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="56%"></div>
												  <span class="num" style="left: 56%;">安全:14</span>
												</div>
												<div class="layui-progress">
												  <div class="layui-progress-bar" lay-percent="15%"></div>
												  <span class="num" style="left: 15%;">保管:4</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 底部样式 -->
						<div ><p></p></div>
					</div>
					
					<!-- 其他统计  Other statistics -->
					<div class="otherStatistics">
						<!-- 外框样式 -->
						<div >
							<!-- 左上角样式 -->
							<span >
								<span >
									<span >
										<i></i>
										<i></i>
										<i></i>
									</span>
								</span>
								<span ></span>
							</span>
							<!-- 顶部条 -->
							<span ></span>
							<!-- 右边条 -->
							<span ></span>
							<!-- 内容区域  -->
							<div class="main-statistical-template-content overflow">
								<div class="main-statistical-template-title">其他统计</div>
								<div class="otherStatistics-box customScrollbar">
									<div class="otherStatistics-list">
										<div class="title">当日炸材用量</div>
										<div class="cont">
											<p>炸药：356公斤</p>
											<p>雷管：1287发</p>
											<p>索类：278米</p>
											<p>硝酸铵：6公斤</p>
										</div>
									</div>
									<div class="otherStatistics-list">
										<div class="title">民爆库房</div>
										<div class="cont">
											<p class="mt-30 pt-20">18座</p>
										</div>
									</div>
									<div class="otherStatistics-list" style="margin-top: 5px;">
										<div class="title">当日配送车辆</div>
										<div class="cont">
											<p>28次</p>
										</div>
									</div>
									<div class="otherStatistics-list" style="margin-top: 5px;">
										<div class="title">运输车辆</div>
										<div class="cont">
											<p>6辆</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 底部样式 -->
						<div ><p></p></div>
					</div>
					
					<!-- 现场图片  Scene picture -->
					<div class="scenePicture">
						<!-- 外框样式 -->
						<div >
							<!-- 左上角样式 -->
							<span >
								<span >
									<span >
										<i></i>
										<i></i>
										<i></i>
									</span>
								</span>
								<span ></span>
							</span>
							<!-- 顶部条 -->
							<span ></span>
							<!-- 右边条 -->
							<span ></span>
							<!-- 内容区域  -->
							<div class="main-statistical-template-content">
								<div class="main-statistical-template-title">现场图片</div>
								<div class="main-statistical-template-content">
									<div class="scenePicture-box" id="layer-photos-demo">
										<div class="scenePicture-describe layui-hide">
											<p>图片描述，点击查看全部</p>
											<i class="layui-icon layui-icon-about"></i>
										</div>
										<!-- <img layer-src="../static/images/scene.png"  alt="图片名" src="../static/images/scene.png"/> -->
									<div class="layui-carousel" id="indexBanner">
										<div carousel-item="">
											<div>
												<img src="../static/images/scene.png" class="img1"
													layer-src="../static/images/scene.png" alt="图片名">
											</div>
											<div>
												<img src="../static/images/qiaoliangbaopo.jpg" class="img1"
													layer-src="../static/images/qiaoliangbaopo.jpg" alt="图片名">
											</div>
											<div>
												<img src="../static/images/fangwubaopo.jpg" class="img1"
													layer-src="../static/images/fangwubaopo.jpg" alt="图片名">
											</div>
											<div>
												<img src="../static/images/yuanzidanbaopo.jpg" class="img1"
													layer-src="../static/images/yuanzidanbaopo.jpg" alt="图片名">
											</div>
										</div>
									</div>
								</div>
								</div>
							</div>
						</div>
						<!-- 底部样式 -->
						<div ><p></p></div>
					</div>
					<!-- 地图  -->
					<div class="bigData-map">
						<div class="map-box">
							<div id="city_map"></div>
							<div id="migrateMap"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript" src="../static/js/lib/layui/layui.js" ></script>
		<script type="text/javascript" src="../static/js/modes/jquery.min.js" ></script>
		<script type="text/javascript" src="../static/js/lib/echarts/echarts.min.js"></script>
		<script type="text/javascript" src="../static/js/lib/customScrollbar/customScrollbar.min.js" ></script>
		<script>
			layui.config({
				version: "1.0.0",
				base: '../static/js/modes/' // 建议改成绝对路径
			}).extend({
				bigData: 'bigData'
			}).use(['bigData'], function (){
				var $ = layui.jquery;
				$(".customScrollbar").mCustomScrollbar({scrollInertia: 200});
			});
			
		
		</script>
		
		<script>
			layui.config({
				version: "1.0.0",
				base: '../static/js/modes/' // 建议改成绝对路径
			}).use(['form', 'util', 'layer', 'carousel'], function() {
				var $ = layui.jquery,
					util = layui.util,
					form = layui.form,
					layer = layui.layer,
					carousel = layui.carousel;
					
				// 图片轮播
				carousel.render({
				    elem: '#indexBanner'
				    ,width: '170px'
				    ,height: '130px'
				    ,interval: 3000
				});
				
			});
		</script>
		
		
	</body>
</html>
